$header_height: 3rem;
$header_bgc: #5ea6fd;
$header_bbc: #21a6ff;

body {
	margin: 0;

	p {
		margin: 0;
	}
}

#app {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#main_header {
	box-sizing: border-box;
	width: 100%;
	height: $header_height;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;

	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	padding: 0 1rem;
	border-bottom: $header_bbc 1px solid;
	background-color: $header_bgc;

	section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.icon {
		width: 2rem;
		height: 2rem;
		border-radius: 100%;
		overflow: hidden;
		margin-right: 0.125rem;
	}

	.text {
		font-size: 1.25rem;
	}


	.nav {
		.nav-item {
			display: inline-block;
			line-height: calc($header_height - 1px);
			height: calc($header_height - 1px);
			margin: 0 0.25rem;
			padding: 0 0.5rem;
			cursor: pointer;

			&:hover {
				color: orange;
			}

			&.active {
				color: red;
				background-color: #4793f0
			}
		}
	}
}

#body {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;

	#main_aside {}

	#main_content {}
}